<style lang="less">
@import "../styles/common.less";
@import "../tables/components/table.less";
</style>
<style>
</style>
<template>
  <div class="div-relative feedback">
    <Row :gutter="10">
      <Card>
        <div class="table-head" v-show="selectionArr.length == 0"></div>
        <div class="table-head" v-show="selectionArr.length > 0">
          <div class="left-nums">选中 {{selectionArr.length}} 条 / 共 {{data.length}} 条</div>
          <div class="left-btn">
            <Button type="error" class="Button" @click="remove()">删除</Button>
          </div>
          <Button type="text" class="Button" @click="hideNums()">取消</Button>
        </div>
        <Row class="margin-top-10">
          <Table
            stripe
            border
            :columns="columns"
            :data="data"
            @on-row-click="onRowData"
            @on-selection-change="selectionChange"
            ref="selectionTable"
          ></Table>
        </Row>
        <div style="margin: 10px;overflow: hidden;height: 36px;">
          <div style="float: right;">
            <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
          </div>
        </div>
      </Card>
      <Modal
        :width="600"
        title="详情"
        v-model="showCurrentTableData"
        ok-text="反馈"
        cancel-text="取消"
        @on-ok="backFun()"
        @on-cancel
        class-name="vertical-center-modal"
        class="Modal-Detail-div"
      >
        <Form label-position="top">
          <FormItem label="手机号">
            <div class="dataDetail-div" v-text="dataDetail.mobile"></div>
          </FormItem>
          <FormItem label="时间">
            <div class="dataDetail-div" v-text="dataDetail.create_time"></div>
          </FormItem>
          <FormItem label="图片" v-if="dataDetail.image && dataDetail.image.length > 0">
            <div class="dataDetail-div">
              <img v-for="el in dataDetail.image" :src="el.url" class="img" />
            </div>
          </FormItem>
          <FormItem label="内容" v-if="dataDetail.content">
            <div class="dataDetail-div" v-text="dataDetail.content"></div>
          </FormItem>
          <FormItem label="反馈信息" v-if="dataDetail.reply && dataDetail.reply.length > 0">
            <div class="dataDetail-div">
              <div v-for="(el, index) in dataDetail.reply">
                <div class="back-time" v-text="el.create_time"></div>
                <div class="back-content" v-text="el.content"></div>
              </div>
            </div>
          </FormItem>
          <FormItem label="反馈">
            <Input
              v-model="addData.back_content"
              type="textarea"
              class="textarea_resize"
              :autosize="{minRows: 3}"
              placeholder="反馈信息"
            ></Input>
          </FormItem>
        </Form>
      </Modal>
    </Row>
    <spin-page :showSpin="showSpin"></spin-page>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import Util from "../../libs/util";
import Utils from "../../libs/mod.utils";
import String from "../../libs/mod.string";
import Modal from "../../libs/mod.Modal";
import spinPage from "../components/spin-page.vue";
export default {
  components: {
    spinPage
  },
  data() {
    return {
      total: 0,
      page: 1,
      size: 10,
      order_by: [],
      id: "",
      searchConName: "",
      searchConTel: "",
      showCurrentTableData: false,
      loading: true,
      showCurrentColumns: [],
      editInlineAndCellData: [],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          key: "mobile",
          title: "手机号",
          align: "center",
          width: 200
        },
        {
          key: "content",
          title: "内容",
          align: "center"
        },
        {
          key: "create_time",
          title: "时间",
          align: "center",
          width: 200
        },
        {
          key: "is_reply",
          title: "状态",
          align: "center",
          width: 100,
          render: (h, params) => {
            var is_reply = params.row.is_reply;
            return h("div", [h("span", is_reply > 0 ? "已反馈" : "未反馈")]);
          }
        }
      ],
      data: [],
      dataDetail: {},
      initTable: [],
      format: Util.constant.format,
      addCurrentTableData: false,
      saveLoading: false,
      ajaxType: "add",
      addData: {
        content: "",
        anonymous: false,
        accessory: [],
        back_content: ""
      },
      selectionArr: [],
      showSpin: false //加载中
    };
  },
  created: function() {
    var _this = this;
    _this.getData();
  },
  methods: {
    // 提交反馈
    backFun: function() {
      var _this = this;
      var back_content = _this.addData.back_content;
      if (back_content == "") {
        _this.$Message.destroy();
        _this.$Message.error("请填写反馈信息!");
        return false;
      }
      var data = {
        fid: _this.id,
        content: back_content
      };
      var params = {
        url: "/feedback/addReply",
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      function _successFun(res) {
        if (res.result == 0) {
          var _data = res.data || [];
          _this.getData();
          _this.show({ id: _this.id });
        } else {
          _this.$Message.destroy();
          _this.$Message.error("提交信息失败!");
        }
      }
    },
    // 取消列表选中
    hideNums: function() {
      var _this = this;
      this.$refs.selectionTable.selectAll(false);
      _this.selectionArr = [];
    },
    getData() {
      var _this = this;
      var data = {
        uid: Util.toJson(localStorage.getItem("userInfo")).id,
        page: _this.page,
        size: _this.size,
        mode: "paging",
        order_by: _this.order_by,
        scope: "all" // 查看全部
      };
      var params = {
        url: "/feedback/list",
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      _this.showSpin = true;
      function _successFun(res) {
        _this.showSpin = false;
        if (res.result == 0) {
          var _data = res.data || [];
          _this.total = res.rows;
          _this.data = _data;
          _this.hideNums();
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询信息失败!");
        }
      }
    },
    handleSearch() {
      var _this = this;
      _this.page = 1;
      var searchConName = _this.searchConName;
    },
    changePage(page) {
      var _this = this;
      _this.page = page;
      _this.getData();
    },
    onRowData: function(data, index) {
      var _this = this;
      _this.show(data);
    },
    show: function(data) {
      var _this = this;
      var id = data.id;
      _this.id = id;
      _this.addData.back_content = "";
      var data = {
        id: _this.id
      };
      var params = {
        url: "/feedback/query",
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      _this.showSpin = true;
      function _successFun(res) {
        _this.showSpin = false;
        if (res.result == 0) {
          var _data = res.data || [];
          _this.dataDetail = _data;
          _this.showCurrentTableData = true;
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询信息失败!");
        }
      }
    },
    asyncOK: function() {
      var _this = this;
      _this.showCurrentTableData = false;
    },
    // 列表多选 选中数据
    selectionChange: function(selection) {
      var _this = this;
      _this.selectionArr = selection;
    },
    // 隐藏编辑页面
    hideAddModal: function() {
      var _this = this;
      _this.addCurrentTableData = false;
    },
    // 删除
    remove: function() {
      var _this = this;
      var selectionArr = _this.selectionArr;
      if (selectionArr.length == 0) {
        _this.$Message.destroy();
        _this.$Message.error("请选择要删除的数据!");
        return false;
      }
      var selectionIds = [];
      for (var k in selectionArr) {
        if (!selectionArr[k]) {
          continue;
        }
        var id = selectionArr[k].id;
        selectionIds.push(id);
      }
      Modal.confirm(
        _this,
        { content: "确定删除选中的信息？" },
        function() {
          var data = {
            ids: selectionIds
          };
          var params = {
            url: "/feedback/del",
            type: Util.method.post,
            data: data,
            success: _successFun
          };
          Util.ajax(_this, params);
          function _successFun(res) {
            if (res.result == 0) {
              _this.page = 1;
              _this.getData();
            } else {
              _this.$Message.destroy();
              _this.$Message.error("删除信息失败!");
            }
          }
        },
        function() {}
      );
    },
    // 导出
    ExportData: function() {
      var _this = this;
      var fields = [
        {
          field: "id",
          title: "#",
          type: "int",
          order: 1
        },
        {
          field: "name",
          title: "姓名",
          type: "varchar",
          order: 2
        },
        {
          field: "anonymous",
          title: "是否匿名",
          type: "varchar",
          order: 3
        },
        {
          field: "pure_text",
          title: "内容",
          type: "varchar",
          order: 4
        },
        {
          field: "create_time",
          title: "时间",
          type: "datetime",
          order: 5
        }
      ];
      var selectionArr = _this.selectionArr;
      if (selectionArr.length == 0) {
        selectionArr = _this.data;
      }
      var selectionIds = [];
      for (var k in selectionArr) {
        if (!selectionArr[k]) {
          continue;
        }
        var id = selectionArr[k].id;
        selectionIds.push(id);
      }

      var fieldsStr = Util.toStr(fields);
      var data = {};
      if (selectionIds.length > 0 && selectionIds.length == _this.data.length) {
        // 全选了
        Modal.confirm(
          _this,
          { content: "确定要导出全部信息？" },
          function() {
            selectionIds = [];
            data = {
              uid: Util.toJson(localStorage.getItem("userInfo")).id,
              type: "app-suggest",
              fields: fieldsStr
            };
            _getAjax();
          },
          function() {
            data = {
              uid: Util.toJson(localStorage.getItem("userInfo")).id,
              type: "app-suggest",
              fields: fieldsStr,
              ids: selectionIds
            };
            _getAjax();
          }
        );
      } else {
        data = {
          uid: Util.toJson(localStorage.getItem("userInfo")).id,
          type: "app-suggest",
          fields: fieldsStr,
          ids: selectionIds
        };
        _getAjax();
      }
      function _getAjax() {
        var params = {
          url: "/attach/db2excle",
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.showSpin = true;
      }

      function _successFun(res) {
        _this.showSpin = false;
        if (res.result == 0) {
          var url = res.data;
          var date = Utils.dateToDateString(new Date());
          Utils.DownloadFile(url, "导出意见反馈_" + date + ".xlsx");
        } else {
          _this.$Message.destroy();
          _this.$Message.error("导出信息失败!");
        }
      }
    }
  }
};
</script>
